<template>
	<view>
		<view class="top-box flex" :style="{height:CustomBar+'px'}" :class="{'top-box-bg':topBgShow}">
			<view class="top-box-s">

			</view>
			<view class="top-box-center">
				个人中心
			</view>
			<view class="top-box-s" @click="logOut">
				<image src="/static/img/shutdown.png" class="shutdown"></image>
			</view>
		</view>
		<view :style="{height:CustomBar+'px'}"></view>
		<page-bg-liner></page-bg-liner>
		<view class="container">
			<view class="section_header flex align-center justify-space-between p-t-10" @click="toMineInfo">
				<view class="flex align-center">
					<image class="image_2"
						:src="userData.photo?userData.photo:'/static/img/headimg.png'" />
					<view class="box_11">
						<view class="text_2 width100">{{userData.name?userData.name:'暂无昵称'}}</view>
						<image class="label_2" 
							:src="userData.sex==1||!userData.sex?'/static/img/man.png':'/static/img/woman.png'"></image>
					</view>
				</view>
				<image class="image_4" src="/static/img/right-icon.png" />
			</view>
			<view class="card_date">
				<picker mode="date" fields="month" @change="changeMonth">
					<view class="card_date_title">
						{{monthData.showStr}}
						<image src="/static/img/bottom-icon.png" style="margin-left: 15rpx;width: 29rpx;height: 15rpx"></image>
					</view>
				</picker>
				
				<view class="card_date_con flex align-center ">
					<view class="con">
						<view class="num relative">{{numData.custom_num||0}}
							<text class="icon" v-if="numData.today_custom_num&&numData.today_custom_num>0">+{{numData.today_custom_num||0}}</text>
						</view>
						<view class="name">客户数</view>
					</view>
					<view class="con">
						<view class="num">{{numData.visits_num||0}}</view>
						<view class="name">拜访数据</view>
					</view>
					<view class="con">
						<view class="num">{{numData.wait_visits_num||0}}</view>
						<view class="name">待拜访</view>
					</view>
				</view>
			</view>
			<view class="card_echarts">
				<view class="card_title">拜访趋势</view>
				<view v-if="paramsData.dealTypeList.length > 0">
					<card-one v-if="chartsShow" :dataList="paramsData.dealTypeList"></card-one>
				</view>
				<view class="card_title">产品</view>
				<view v-if="paramsData.dealTypeList2.length > 0">
					<card-two v-if="chartsShow2" :dataList="paramsData.dealTypeList2"></card-two>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
	</view>

</template>

<script>
	import cardOne from "./compontents/pieChart.vue"
	import cardTwo from "./compontents/pieChart2.vue"
	export default {
		components: {
			cardOne,
			cardTwo
		},
		data() {
			return {
				windowHeight: 650,
				windowWidth: 375,
				CustomBar: this.CustomBar,
				chartsShow: true,
				chartsShow2: true,
				paramsData: {
					dealTypeList: [],
					dealTypeList2: []
				},
				topBgShow: false,
				monthData: {
					postStr:'',
					showStr:''
				},
				userData:{},
				numData:{},
				
			}
		},
		onLoad() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.getNowMonth();
		},
		onShow() {
			this.getUser();
		},
		onPageScroll(e) {
			if (e.scrollTop > 30) {
				this.topBgShow = true;
			} else {
				this.topBgShow = false;
			}
		},
		onPullDownRefresh() {
			this.getInfo();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			getUser(){
				let data = {
				
				}
				this.$http('/api/userInfo', data,'get').then(res => {
					let info = res.data;
					this.userData = info;
				})
			},
			getNowMonth(){
				let date = new Date();
				let Y = date.getFullYear() ;
				let M = (date.getMonth() + 1).toString().padStart(2, '0');
				this.monthData.showStr = `${Y}年${M}月`;
				this.monthData.postStr = `${Y}-${M}`;
				this.getInfo();
			},
			getInfo() {
				let data = {
					moon:this.monthData.postStr
				}
				this.$http('/api/personal', data, 'get').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						// this.userData = datas.info;
						this.numData = datas.num;
						let arr = [],arr2 = [];
						if(datas.visiting_trends){
							datas.visiting_trends.forEach(item=>{
								arr.push({
									month:item.moon.slice(0,7),
									custom_num:item.custom_num,
									visits_num:item.visits_num
								})
							})
						}
						if(datas.tag){
							datas.tag.forEach(item=>{
								arr2.push({
									name:item.name,
									num:item.num
								})
							})
						}
						this.paramsData.dealTypeList = arr;
						this.paramsData.dealTypeList2 = arr2;
					}
				})
			},
			changeMonth(e) {
				let val = e.detail.value;
				let arr = val.split('-');
				this.monthData.showStr = `${arr[0]}年${arr[1]}月`;
				this.monthData.postStr = val;
				this.getInfo();
			},
			logOut() {
				uni.showModal({
					title: '退出登录',
					content: '确认退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.logOutDo();
						}
					}
				})
			},
			logOutDo() {
				let data = {

				}
				this.$http('/api/system/auth/logout', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '退出成功',
							icon: 'none'
						})
						uni.setStorageSync('token', '');
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/logon/logon'
							})
						}, 800)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			toMineInfo(){
				uni.navigateTo({
					url:'/pages/logon/temp'
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.top-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;

		.top-box-s {
			height: 100%;
			width: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.shutdown {
				width: 40rpx;
				height: 40rpx;

			}
		}

		.top-box-center {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: 700;
			flex: 1;
		}
	}

	.top-box-bg {
		background: #c0ddfe;
	}

	.container {
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;

		.header {
			height: 100rpx;
		}

		.section_header {
			position: relative;

			.image_2 {
				width: 100rpx;
				height: 100rpx;
				min-width: 100rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.label_2 {
				width: 30rpx;
				height: 30rpx;
				margin-top: 18rpx;
			}

			.text_2 {
				width: 100%;
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-left: 2px;
			}

			.image_4 {
				width: 20rpx;
				height: 30rpx;

			}
		}

		.card_date {
			margin-top: 40rpx;

			&_title {
				font-size: 32rpx;
			}

			&_con {
				padding: 50rpx 0;
				background-color: #fff;
				border-radius: 20rpx;
				margin: 40rpx 0;

				.con {
					width: 33.33%;
					text-align: center;

					.num {
						font-size: 40rpx;
						display: inline-block;

						.icon {
							display: inline-block;
							right: -40rpx;
							position: absolute;
							top: -20rpx;
							font-size: 28rpx;
							color: #067C03;
						}
					}

					.name {
						font-size: 30rpx;
						color: #666;
						margin-top: 20rpx;
					}
				}
			}
		}

		.card_echarts {
			.card_title {
				margin-top: 30rpx;
				margin-bottom: 40rpx;
				font-size: 32rpx;
			}
		}
	}
</style>